/* Ionic Variables and Theming. For more info, please see:
http://ionicframework.com/docs/theming/ */

/** Ionic CSS Variables **/
:root {
  /** primary - 现代蓝色主题 **/
  --ion-color-primary: #4f46e5;
  --ion-color-primary-rgb: 79, 70, 229;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #4338ca;
  --ion-color-primary-tint: #6366f1;

  /** secondary - 现代青色 **/
  --ion-color-secondary: #06b6d4;
  --ion-color-secondary-rgb: 6, 182, 212;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #0891b2;
  --ion-color-secondary-tint: #22d3ee;

  /** tertiary - 现代紫色 **/
  --ion-color-tertiary: #8b5cf6;
  --ion-color-tertiary-rgb: 139, 92, 246;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #7c3aed;
  --ion-color-tertiary-tint: #a78bfa;

  /** success - 现代绿色 **/
  --ion-color-success: #10b981;
  --ion-color-success-rgb: 16, 185, 129;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #059669;
  --ion-color-success-tint: #34d399;

  /** warning - 现代橙色 **/
  --ion-color-warning: #f59e0b;
  --ion-color-warning-rgb: 245, 158, 11;
  --ion-color-warning-contrast: #ffffff;
  --ion-color-warning-contrast-rgb: 255, 255, 255;
  --ion-color-warning-shade: #d97706;
  --ion-color-warning-tint: #fbbf24;

  /** danger - 现代红色 **/
  --ion-color-danger: #ef4444;
  --ion-color-danger-rgb: 239, 68, 68;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #dc2626;
  --ion-color-danger-tint: #f87171;

  /** 自定义颜色 - 书籍主题 **/
  --ion-color-book: #8b4513;
  --ion-color-book-rgb: 139, 69, 19;
  --ion-color-book-contrast: #ffffff;
  --ion-color-book-contrast-rgb: 255, 255, 255;
  --ion-color-book-shade: #7a3e11;
  --ion-color-book-tint: #a0522d;

  /** 自定义颜色 - 阅读主题 **/
  --ion-color-reading: #2d4a22;
  --ion-color-reading-rgb: 45, 74, 34;
  --ion-color-reading-contrast: #ffffff;
  --ion-color-reading-contrast-rgb: 255, 255, 255;
  --ion-color-reading-shade: #28421e;
  --ion-color-reading-tint: #3e5b33;

  /** 背景和表面颜色 **/
  --ion-background-color: #fafafa;
  --ion-background-color-rgb: 250, 250, 250;
  --ion-text-color: #1f2937;
  --ion-text-color-rgb: 31, 41, 55;
  --ion-border-color: #e5e7eb;
  --ion-item-background: #ffffff;
  --ion-toolbar-background: #ffffff;
  --ion-tab-bar-background: #ffffff;
  --ion-card-background: #ffffff;

  /** 阴影和圆角 **/
  --ion-card-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --ion-border-radius: 12px;
  --ion-button-border-radius: 8px;
}

/** 自定义CSS类 **/
.book-color {
  --ion-color-base: var(--ion-color-book);
  --ion-color-base-rgb: var(--ion-color-book-rgb);
  --ion-color-contrast: var(--ion-color-book-contrast);
  --ion-color-contrast-rgb: var(--ion-color-book-contrast-rgb);
  --ion-color-shade: var(--ion-color-book-shade);
  --ion-color-tint: var(--ion-color-book-tint);
}

.reading-color {
  --ion-color-base: var(--ion-color-reading);
  --ion-color-base-rgb: var(--ion-color-reading-rgb);
  --ion-color-contrast: var(--ion-color-reading-contrast);
  --ion-color-contrast-rgb: var(--ion-color-reading-contrast-rgb);
  --ion-color-shade: var(--ion-color-reading-shade);
  --ion-color-tint: var(--ion-color-reading-tint);
}

/** 现代化卡片样式 **/
ion-card {
  border-radius: var(--ion-border-radius);
  box-shadow: var(--ion-card-box-shadow);
  margin: 16px;
  border: 1px solid var(--ion-border-color);
}

/** 现代化按钮样式 **/
ion-button {
  --border-radius: var(--ion-button-border-radius);
  font-weight: 600;
  text-transform: none;
}

/** 现代化工具栏样式 **/
ion-toolbar {
  --background: var(--ion-toolbar-background);
  --border-color: var(--ion-border-color);
  --color: var(--ion-text-color);
}

ion-title {
  font-weight: 700;
  font-size: 1.25rem;
}

/** 现代化标签栏样式 **/
ion-tab-bar {
  --background: var(--ion-tab-bar-background);
  --border: 1px solid var(--ion-border-color);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

ion-tab-button {
  --color: #6b7280;
  --color-selected: var(--ion-color-primary);
  font-weight: 500;
}

/** 现代化搜索栏样式 **/
ion-searchbar {
  --background: #f9fafb;
  --border-radius: 12px;
  --box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --color: var(--ion-text-color);
  margin: 16px;
}

/** 现代化分段控件样式 **/
ion-segment {
  --background: #f3f4f6;
  border-radius: 8px;
  padding: 4px;
}

ion-segment-button {
  --color: #6b7280;
  --color-checked: #ffffff;
  --background-checked: var(--ion-color-primary);
  --border-radius: 6px;
  font-weight: 500;
  margin: 2px;
}

/** 暗色主题适配 **/
@media (prefers-color-scheme: dark) {
  :root {
    --ion-background-color: #0f172a;
    --ion-background-color-rgb: 15, 23, 42;
    --ion-text-color: #f1f5f9;
    --ion-text-color-rgb: 241, 245, 249;
    --ion-border-color: #334155;
    --ion-item-background: #1e293b;
    --ion-toolbar-background: #1e293b;
    --ion-tab-bar-background: #1e293b;
    --ion-card-background: #1e293b;
  }

  ion-searchbar {
    --background: #334155;
  }

  ion-segment {
    --background: #334155;
  }

  ion-tab-button {
    --color: #94a3b8;
  }
}

/** 响应式设计 **/
@media (min-width: 768px) {
  ion-card {
    margin: 24px;
  }
  
  ion-searchbar {
    margin: 24px;
  }
}

/** 动画效果 **/
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up {
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/** 自定义工具类 **/
.glass-effect {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.gradient-bg {
  background: linear-gradient(135deg, var(--ion-color-primary), var(--ion-color-secondary));
}

.text-gradient {
  background: linear-gradient(135deg, var(--ion-color-primary), var(--ion-color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
